<template>
  <div>
    <van-nav-bar>
      <template #title> 支付成功 </template>
    </van-nav-bar>
    <div class="button">
      <van-button plain type="primary" @click="gohome" color="red">返回首页</van-button>
      <van-button plain type="primary" @click="gocart" color="red">去购物车</van-button>
    </div>
    <van-divider
      :style="{
        color: '#ccc',
        borderColor: '#ccc',
        padding: '0 16px',
      }"
    >
      继续逛逛
    </van-divider>
    <ul class="goods1">
      <li
        class="van-hairline--surround"
        v-for="(item, index) in recommendlist"
        :key="index"
        @click="jumpTo(item.proid)"
      >
        <img :src="item.img1" alt="" />
        <div>
          <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
          <p class="money">￥{{ item.originprice }}</p>
          <!-- {{list}} -->
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";

Vue.use(Button);
import { RecommendList } from "../api/cart";
export default {
  data() {
    return {
      recommendlist: [],
    };
  },
  created() {
    RecommendList().then((data) => {
      console.log(data);
      this.recommendlist = data.data.data;
    });
  },
  methods: {
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
    gohome(){
        this.$router.push("/home")
    },
    gocart(){
        this.$router.push("/cart")
    },
  },
};
</script>

<style scoped>
.goods1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* position: relative; */
}
.goods1 li {
  width: 48%;
}
.goods1 li img {
  width: 100%;
}
.button{
    text-align: center;
    margin: 50px;
    display: flex;
    justify-content: space-around;
}
</style>